<template>
	<view class="home">
    <navigator url="../login/login">用户登录</navigator>
    <!-- 滚动视图 -->
		<scroll-view :scroll-x="true" class="category-scroll">
		  <text v-for="category in categories" :key="category.id">{{ category.name }}</text>
		</scroll-view>
    
    <!-- 轮播 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item
        v-for="banner in banners"
        :key="banner.id"
      >
        <image :src="banner.imageUrl" :style="{width: '100%', height: '100%'}"></image>
      </swiper-item>
    </swiper>
    
    <!-- 推荐商品 -->
    <view class="products-list">
      <view class="prod-item" v-for="prod in products">
        <image :src="prod.image" mode=""></image>
        <view class="prod-content">
          <view class="prod-title">
            {{prod.title}}
          </view>
          <view class="prod-price">
            {{prod.price}}
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: [],
        banners: [],
        products: [],
        nextIndex: 0,
        finished: false,
			}
		},
    async created() {
      const [result, bannersData, feeds] = await Promise.all([
        this.$http({
          url: '/api/tabs',
          method: 'GET',
        }),
        this.$http({
          url: 'http://rap2api.taobao.org/app/mock/297500/api/banners',
        }),
        this.$http({
          url: '/api/tab/5/feeds',
          data: {
            start: this.nextIndex,
          }
        })
      ])
      this.categories = result.list
      this.banners = bannersData.banners
      this.products = feeds.list
      this.nextIndex = feeds.nextIndex
      this.finished = feeds.isEnd
    },
		onLoad() {
      console.log('页面加载', this.$store)
		},
		methods: {

		},
    async onReachBottom() { // 触底执行
      console.log('bottom..............')
      if (this.finished) {
        return
      }
      const result = await this.$http({
        url: '/api/tab/5/feeds',
        data: {
          start: this.nextIndex,
        }
      })
      this.products = [
        ...this.products,
        ...result.list,
      ]
      this.nextIndex = result.nextIndex
      this.finished = result.isEnd
    }
	}
</script>

<style lang="scss">
	.category-scroll {
    white-space: nowrap;
    
    text {
      margin: 0 12rpx;
    }
  }
  
  .prod {
    &-item {
      display: flex;
      
      image {
        width: 64px;
        height: 64px;
      }
    }
    &-content {
      flex: 1;
    }
  }
</style>
